<!-- 商品详情重构页面 -->
<template>
    <view>
        <view class="detailPage bgf8" :style="{'--page-bot': mode ? '106px' : '60px'}" v-if="pageData">
            <!-- 返回、购物车 -->
            <view class="fcBtn d-flex a-center bgwhite" :style="{top: menuButtonTop+'px',opacity: 0.8}">
                <view class="flex-1 flexac">
                    <text class="iconfont icon-shouyeT211 color_66 bold" v-if="fromShare == 1" @click="backHome()"></text>
                    <text class="iconfont icon-xiangzuo color_66" v-else @click="back()"></text>
                </view>
                <u-line direction="column" :hairline="false" length="16"></u-line>
                <view class="flex-1 flexac p-re" @click="toCart">
                    <text class="iconfont icon-gouwuche color_66 bold"></text>
                    <u-badge type="error" max="99" :value="cartNum" absolute :offset="[-8,-4]"></u-badge>
                </view>
            </view>
            <!-- 顶部导航 -->
            <view class="topNav bgwhite" :class="{'showTopNav': toTop, 'hideTopNav': !toTop && showed}">
                <view :style="{height: totalHeight+'px'}"></view>
                <u-tabs :list="tabList" :current="currentTab" :lineColor="color" lineWidth="28" @click="tabClick"
                    :itemStyle="{width:tabWidth,height:'88rpx'}" :inactiveStyle="{color:'#444',fontSize:'28rpx',transform:'scale(1)'}" 
                    :activeStyle="{color:'#222',fontSize:'28rpx',fontWeight:'bold',transform:'scale(1.05)'}"></u-tabs>
            </view>
            <!-- 轮播图 -->
            <view :style="{ height: pageData.photo_proportion*750 + 'rpx' }">
                <u-swiper height="100%" :list="swiperList" keyName="url" :autoplay="false" radius="0" indicatorStyle="right: 40rpx"
                    @change="e => currentNum = e.current" @click="previewImg">
                    <view slot="indicator" class="indicator-num p-top4 p-bot4 d-flex j-centert">
                        <text class="h6 white">{{ currentNum + 1 }} / {{ swiperList.length }}</text>
                    </view>
                </u-swiper>
            </view>
            <!-- 秒杀、团购活动倒计时 -->
            <view class="countDown d-flex j-sb a-center" v-if="pageData.goods_type != 0 && pageData.show_time == 1 && pageData.goods_state != 0">
                <view class="actName size38 white bold flexac t-letter4">{{ pageData.act_name }}</view>
                <view class="d-flex a-center">
                    <image :src="baseUrl + '/Uploads/diy/img/lightning.png'" mode="widthFix" style="width: 26rpx;"></image>
                    <view class="m-left20">
                        <view class="stock size22 bold500 m-bot16">仅剩{{ pageData.stock ? pageData.stock : 0 }}{{ pageData.unit }}</view>
                        <view class="progress">
                            <u-line-progress :percentage="pageData.sale_percent" activeColor="#FE3C5E" inactiveColor="#FFBEBA" height="7" :showText="false"></u-line-progress>
                        </view>
                    </view>
                </view>
                <view class="p-right30">
                    <view class="text-center" v-if="pageData.goods_state == 1">
                        <view class="size28 white m-bot10">距离活动结束还剩</view>
                        <count-down txtColor='#fff' bg='#313131' fontSize='28' endTxt='本场' :time="parseInt(pageData.goods_end_time)"></count-down>
                    </view>
                    <view class="text-center" v-if="pageData.goods_state == 2">
                        <view class="size28 white m-bot10">距离活动开始还有</view>
                        <count-down txtColor='#fff' bg='#313131' fontSize='28' endTxt='本场' :time="parseInt(pageData.goods_start_time)"></count-down>
                    </view>
                </view>
            </view>
            <!-- 标题 -->
            <view class="padding20-40 bgwhite">
                <view class="profitTitle_ lines" v-if="pageData.profitTitle">
                    <text>{{ pageData.profitTitle }}</text>
                </view>
                <view class="d-flex j-sb a-center m-bot20">
                    <view class="d-flex a-center" v-if="pageData.goods_type == 2">
                        <view>
                            <text class="color_FOD size32 bold">￥</text>
                            <text class="color_FOD size40 bold">{{ pageData.goods_fopen_group_pricee }}</text>
                        </view>
                        <view class="color_66 size28 line-through m-left10" v-if="parseFloat(pageData.goods_fopen_group_pricee) < parseFloat(pageData.goods_full_price)">￥{{ pageData.goods_full_price }}</view>
                    </view>
					
                    <view class="d-flex a-center" v-else>
                        <view>
                            <text class="color_FOD size32 bold">￥</text>
                            <text class="color_FOD size40 bold" v-if="parseFloat(pageData.minPrice) == parseFloat(pageData.maxPrice)">{{ pageData.minPrice }}</text>
                            <text class="color_FOD size40 bold" v-else>{{ pageData.minPrice }}-{{ pageData.maxPrice }}</text>
                        </view>
                        <view class="bgFD8 bor_radius_40 padding4-20 m-left10" v-if="pageData.memberprice && parseFloat(pageData.memberprice) < parseFloat(pageData.minPrice)">
                            <text class="color_FOD size28">折后价</text>
                            <text class="color_FOD size28 bold">￥</text>
                            <text class="color_FOD size36 bold">{{ pageData.memberprice }}</text>
                        </view>
                        <view v-if="parseFloat(pageData.minPrice) == parseFloat(pageData.maxPrice) && parseFloat(pageData.memberprice) == parseFloat(pageData.minPrice) 
                            && parseFloat(pageData.minPrice) < parseFloat(pageData.goods_full_price)" 
                            class="color_66 size28 line-through m-left10">￥{{ pageData.goods_full_price }}</view>
                    </view>
                    <!-- 分享 -->
                    <view class="d-flex f-column a-center" @click="handleShare">
                        <text class="iconfont icon-fenxiang1 color_66 size36"></text>
                        <text class="size22 color_66">分享</text>
                    </view>
                </view>
				
				<view class="row m-top14" v-if="pageData.next_level">
					<view class="dd-inline-block3 h7 bgEA padding10-20 bor_radius_30">{{pageData.next_level}}</view>
				</view>
                <view class="color_22 size38 bold line50">{{ pageData.goods_name }}</view>
                <view class="color_77 h6 bold400 line40 m-top20" v-if="pageData.goods_info && mode == 0">{{ pageData.goods_info }}</view>
			    <view class="color_FOD size26 m-top16 bold" v-if="pageData.expire_at">有效期：{{pageData.expire_at}}</view> 
	
                <!-- 选择规格(餐饮) -->
                <view class="m-top40" v-if="pageData.getGoodsSpecs && mode == 1">
                    <view class="d-flex" v-for="(item,index) in specsList" :key="index">
                        <view class="size26 color_77 m-right40 m-bot20 line54">{{ item.title }}</view>
                        <view class="d-flex f-wrap flex-1">
                            <view class="specsTag text-center color_66 bor_radius_6 m-right20 m-bot20" @click="handleSpecs(index,itm.state,itm.specs_id)"
                                :class="{'active': specs_ids[index] == itm.specs_id, 'color_cc': !itm.state}"
                                v-for="(itm,idx) in item.list" :key="idx" v-show="item.list">{{ itm.title }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 选择规格(电商) -->
            <view class="padding20" v-if="mode == 0">
                <view class="card padding20 bgwhite bor_radius_8">
                    <view class="d-flex j-sb m-bot30" @click="showPopup = true; specsFlag = 1" v-if="specsList.length">
                        <view>
                            <text class="h6 color_77 bold500 m-right34">选择</text>
                            <text class="h6 color_22 bold400">{{ specs_title ? specs_title : '产品规格' }}</text>
                        </view>
                        <text class="iconfont icon-xiangyouxiayiye color_22 size26"></text>
                    </view>
                    <view class="d-flex j-sb a-center m-bot30" @click="toUrl(`/orderPage/Addresslist/Addresslist`)">
                        <view class="d-flex">
                            <text class="h6 color_77 bold500 m-right34">配送</text>
                            <view class="h6 color_22 bold400 ellipsis flex-1" v-if="addr">至{{ addr }}</view>
                            <text class="h6 color_22 bold400" v-else>请选择</text>
                        </view>
                        <text class="iconfont icon-xiangyouxiayiye color_22 size26"></text>
                    </view>
                    <view class="d-flex j-sb" @click="showFreDesc = true">
                        <view>
                            <text class="h6 color_77 bold500 m-right34">运费</text>
                            <text class="h6 color_22 bold400">{{ freight }}</text>
                        </view>
                        <text class="iconfont icon-xiangyouxiayiye color_22 size26"></text>
                    </view>
                </view>
            </view>
            <!-- 推荐(点餐) -->
            <view class="package padding20" v-if="likeList.length && mode == 1">
                <view class="card padding20 bgwhite bor_radius_8">
                    <view class="item bgf8 d-flex bor_radius_10" v-for="(item,index) in likeListCom" :key="index" :class="{'m-bot20': index != likeListCom.length - 1}"
                        @click="toUrl(`/pages/goods/goods_detail?goodsid=${item.goods_id}&mode=1&scan=${scan}&tid=${tid}`)">
                        <view class="p-left20 p-top20 p-bot20">
                            <image class="img bor_radius_6" :src="item.img ? $imgUrls(item.img) : staticUrl + '/images/imageLoading.png'" mode="aspectFill"></image>
                        </view>
                        <view class="d-flex f-column j-sb padding30 flex-1">
                            <view class="size26 color_22 bold500 ellipsis_2">{{ item.name }}</view>
                            <view class="d-flex j-sb">
                                <view class="size30 color_F4 bold">￥{{ item.price }}</view>
                                <text class="iconfont icon-zengjia size42 color_ff4"></text>
                            </view>
                        </view>
                    </view>
                    <view class="m-top20 d-flex f-column a-center" @click="isFold = !isFold" v-if="likeList.length > 4">
                        <text class="h6 color_77 bold400 m-bot10">{{ isFold ? '展开全部' : '收起' }}</text>
                        <text class="iconfont icon-xiangxia h6 color_77" v-if="isFold"></text>
                        <text class="iconfont icon-xiangshang h6 color_77" v-else></text>
                    </view>
                </view>
            </view>
            <!-- 去参团 -->
            <view v-if="pageData.goods_type == 2 && pageData.groupData">
                <Join :groupData='pageData.groupData'></Join>
            </view>
            <!-- 评价 -->
            <view id="evaluate" class="evaluate bgwhite padding30-40 m-bot20" :class="{'m-top20': !likeList.length && mode == 1}">
                <view class="d-flex j-sb m-bot40">
                    <view class="size32 color_22 bold">{{ nameDefinition.goodsName || '宝贝' }}评价({{ commentData.count ? commentData.count.allcount : "0" }})</view>
                    <view @click="toUrl('/commentPage/comment/commentList?gid='+goods_id)">
                        <text class="h6 color_F4 m-right10">好评{{ pageData.goods_favorable ? pageData.goods_favorable : "0"}}%</text>
                        <text class="iconfont icon-xiangyouxiayiye h6 color_99"></text>
                    </view>
                </view>
                <view class="m-bot30 d-flex f-wrap" v-if="commentData.comment_labels && commentData.comment_labels.length">
                    <view class="label m-right30 m-bot10 h6 color_44" v-for="(item,index) in commentData.comment_labels" :key="index"
                        @click="toUrl('/commentPage/comment/commentList?gid='+goods_id+'&label='+item.id)">{{ item.title }}({{ item.num }})</view>
                </view>
                <swiper class="cont" next-margin="150rpx" v-if="commentData.data && commentData.data.length">
                    <swiper-item v-for="(item,index) in commentData.data" :key="index">
                        <view class="item bgFA bor_radius_8 d-flex j-sb">
                            <view class="flex-1 padding20">
                                <view class="d-flex a-center m-bot20">
                                    <u-avatar :src="$imgUrls(item.v_headimg)" size="30"></u-avatar>
                                    <view class="size22 color_66 bold500 m-left10 ellipsis" v-if="item.v_name">{{ item.v_name }}</view>
                                </view>
                                <view class="size22 color_44 ellipsis_3 line34">{{ item.comment_word }}</view>
                            </view>
                            <image class="img" v-if="item.comment_pic && item.comment_pic[0]" :src="$imgUrls(item.comment_pic[0])" mode="aspectFill"></image>
                        </view>
                    </swiper-item>
                </swiper>
                <view v-else class="color_66 text-center m-top30">
                    该{{ nameDefinition.goodsName || '宝贝' }}还没有任何评价
                </view>
            </view>
            <!-- 店铺 -->
            <view class="bgwhite padding30-40 m-bot20" v-if="pageData.store_id && pageData.store_id != 0">
                <view class="d-flex j-sb a-center">
                    <view class="d-flex">
                        <image :src="pageData.shop_logo ? $imgUrls(pageData.shop_logo) : staticUrl +'/images/imageLoading.png'" mode="aspectFit" 
                            style="width: 80rpx; height: 80rpx;"></image>
                        <view class="p-left30 d-flex f-column j-sb">
                            <view class="color_22 size28 bold">{{ pageData.shopName }}</view>
                            <view class="color_77 size22 bold400">在售商品<text class="color_22 bold m-left4 m-right4">{{ pageData.shopGoodsCount }}</text>件</view>
                        </view>
                    </view>
                    <view class="d-flex a-center" @click="toUrl('/pages/store/storeIndex?shop_id=' + pageData.store_id)" v-if="scan == 0">
                        <text class="color_22 h6 bold500 m-right10">进入店铺</text>
                        <text class="iconfont icon-xiangyouxiayiye color_22 h6"></text>
                    </view>
                </view>
            </view>
            <!-- 详情 -->
            <view id="details" class="bgwhite" v-if="pageData.goods_content">
                <view class="size32 color_22 bold padding30-40 m-bot10">{{ nameDefinition.goodsName || '宝贝' }}详情</view>
                <u-parse :content="pageData.goods_content" :domain="imgUrl" :scrollTable="true" :selectable="true" :useAnchor="true" @ready="parseDone"></u-parse>
            </view>
			
			<!-- 课程目录 -->
			<catalogue id="catalogue" 
			          :chapter_list="pageData.chapter_list" 
					  :goods_id="goods_id" 
					  v-if="pageData.goods_cate == 1"
					  @Unlock="screening = true,slidetop = true">
			</catalogue>
			
            <!-- 推荐(电商) -->
            <view id="recommend" class="recommend bgwhite padding30-40 m-top20" v-if="likeList.length && mode == 0">
                <view class="size32 color_22 bold m-bot40">{{ nameDefinition.goodsName || '宝贝' }}推荐</view>
                <view class="d-flex f-wrap">
                    <view class="item d-flex f-column" v-for="(item,index) in likeList" :key="index" @click="toGoods(item.goods_id,item.store_id)">
                        <image class="img" :src="item.img ? $imgUrls(item.img) : staticUrl + '/images/imageLoading.png'" mode="aspectFill"></image>
                        <view class="d-flex f-column j-sb p-top10 p-bot10 flex-1">
                            <view class="size22 color_22 bold500 ellipsis_2">{{ item.name }}</view>
                            <view class="profitTitle_ lines" v-if="item.profitTitle">
                                <text>{{ item.profitTitle }}</text>
                            </view>
                            <view class="size26 color_F4 bold">￥{{ item.price }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 底部导航(电商) -->
            <view class="common_footer bgwhite p-top20 d-flex j-sb a-center" v-if="mode == 0">
                <view class="list d-flex a-center">
                    <view class="flex-1 text-center color_66" v-if="pageData.store_id != 0"  @click="toUrl('/pages/store/storeIndex?shop_id=' + pageData.store_id)">
                        <text class="iconfont icon-store size36 m-bot6" :style="{color}"></text>
                        <view>{{ nameDefinition.storeDefinitionName || '店铺' }}</view>
                    </view>
                    <view class="flex-1 text-center color_66" v-else @click="backHome">
                        <text class="iconfont icon-withdraw size36 m-bot6"></text>
                        <view>返回首页</view>
                    </view>
                    <view class="flex-1 p-re">
                        <view class="text-center color_66" @click="contact">
                            <text class="iconfont icon-conversation_icon size36 m-bot6"></text>
                            <view>客服</view>
                        </view>
                        <!-- #ifdef MP-WEIXIN -->
                        <button open-type="contact" class="btn-contact" v-if='startUp.service_state != 1'></button>
                        <!-- #endif -->
                    </view>
                    <!-- 收藏 -->
                    <view class="flex-1 text-center color_66" @click="handleCollect">
                        <text class="iconfont icon-01 size36 m-bot6" :style="{color}" v-if="pageData.goods_collect"></text>
                        <text class="iconfont icon-02 size36 m-bot6" v-else></text>       
                        <view>{{ pageData.goods_collect ? '已收藏' : '收藏' }}</view>
                    </view>
                </view>
                <view v-if="pageData.state == 0" class="loneBtn m-left20 m-right20 size28 white text-center bgAF">
                    {{ nameDefinition.goodsName || '宝贝' }}已下架
                </view>
                <!-- 上架中 -->
                <view v-else>
                    <!-- 团购 -->
                    <view v-if="pageData.goods_type == 2" class="groupBtn m-left20 m-right20 white d-flex">
                        <view class="left flex-1 text-center bgFFA p-top4 p-bot4" v-if="(pageData.goods_state == 1 && pageData.show_time == 1) || pageData.show_time == 0"
                            @click="clickBtn(1)">
                            <view class="size28">{{ pageData.goods_price_name ? pageData.goods_price_name : '立即购买' }}</view>
                            <view>￥{{ pageData.goods_price }}</view>
                        </view>
                        <view class="right flex-1 text-center bgFF4B p-top4 p-bot4" v-if="(pageData.goods_state == 1 && pageData.show_time == 1) || pageData.show_time == 0"
                            @click="clickBtn(2)">
                            <view class="size28">{{ pageData.goods_open_group_price_name ? pageData.goods_open_group_price_name : '一键开团' }}</view>
                            <view>￥{{ pageData.goods_fopen_group_pricee }}</view>
                        </view>
                    </view>
                    <!-- 普通0/特价1 -->
                    <view v-else class="groupBtn m-left20 m-right20 white">
                        <view class="d-flex" v-if="(pageData.goods_state == 1 && pageData.show_time == 1) || pageData.show_time == 0">
                            <!-- join_cart：是否允许添加购物车 1允许 2拒绝 -->
                            <!-- is_id_number：是否需要输入身份证 1需要 2无需 -->
                            <view class="left flex-1 bgFFA flexac size28" v-if="pageData.join_cart != 2 && pageData.is_id_number != 1" @click="clickBtn(3)">加入{{ cartName }}</view>
                            <view class="right flex-1 text-center bgFF4B p-top4 p-bot4" :class="{'bor_radius_68': pageData.join_cart == 2 || pageData.is_id_number == 1}"
                                @click="clickBtn(1)">
                                <view class="size28">{{ pageData.goods_price_name ? pageData.goods_price_name : '立即购买' }}</view>
                                <view>￥{{ pageData.goods_price }}</view>
                            </view>
                        </view>
                    </view>
                    <!-- 活动未开始 -->
                    <view v-if="pageData.goods_state == 2 && pageData.show_time == 1"
                        class="loneBtn m-left20 m-right20 size28 white text-center bgFFA">活动未开始</view>
                    <!-- 活动已结束 -->
                    <view v-if="pageData.goods_state == 0 && pageData.show_time == 1"
                        class="loneBtn m-left20 m-right20 size28 white text-center bgAF">活动已结束</view>
                </view>
            </view>
            <!-- 底部导航(点餐) -->
            <view class="order_footer bgwhite d-flex f-column p-top20" v-if="mode == 1">
                <view class="row j-sb padding15-30">
                    <view class="d-flex a-end">
                        <view class="color_ff4 bold">
                            <text class="size26">￥</text>
                            <text class="size32">{{ currentSpecs.price ? currentSpecs.price : pageData.goods_price }}</text>
                        </view>
                        <view class="color_66 size26 line-through m-left10">￥{{ pageData.goods_full_price }}</view>
                    </view>
                    <u-number-box v-model="v_input" integer :max="stock" @overlimit="overlimit">
                        <view slot="minus"><text class="iconfont icon-jianshao1 size42 color_ff4"></text></view>
                        <view slot="input"><view class="size28 color_33 bold text-center" style="width: 60rpx;">{{ v_input }}</view></view>
                        <view slot="plus"><text class="iconfont icon-zengjia size42 color_ff4"></text></view>
                    </u-number-box>
                </view>
                <view class="row j-se padding15-30 white">
                    <view class="btn flexac bgFFA size28" @click="clickBtn(3)">加入{{ cartName }}</view>
                    <view class="btn flexac bgFF4B size28" @click="clickBtn(1)" v-if="scan == 0">{{ pageData.goods_price_name ? pageData.goods_price_name : '立即购买' }}</view>
                </view>
            </view>
            <!-- 规格弹框(电商) -->
            <u-popup :show="showPopup" closeable @close="showPopup = false">
                <view class="specsPop padding30">
                    <view class="d-flex">
                        <image class="img bor_radius_4 m-right20 f-shrink-0" :src="currentSpecs.img ? $imgUrls(currentSpecs.img) : $imgUrls(pageData.goods_img)" 
                            mode="aspectFill" @click="$previewImgs(0, currentSpecs.photo)"></image>
                        <view class="d-flex f-column j-sb">
                            <view class="p-right40">
                                <text v-if="clickBtnType == 2" style="vertical-align: top;"
                                    class="d-inline-block white bgFF4B line40 p-left20 p-right20 bor_radius_40 m-right4">{{ pageData.goods_group_number }}人团</text>
                                <text class="size28">{{ pageData.goods_name }}</text>
                            </view>
                            <view>
                                <text class="color_FOD size32 bold">￥</text>
                                <text class="color_FOD size40 bold" v-if="pageData.goods_type == 2 && clickBtnType == 2">{{ pageData.goods_fopen_group_pricee }}</text>
                                <text class="color_FOD size40 bold" v-else>{{ currentSpecs.price ? currentSpecs.price : pageData.goods_price }}</text>
                            </view>
                        </view>
                    </view>
                    <view v-if="pageData.getGoodsSpecs">
                        <view v-for="(item,index) in specsList" :key="index">
                            <view class="size28 color_33 bold m-top30 m-bot20">{{ item.title }}</view>
                            <view>
                                <view class="specsItm d-inline-block color_66 bor_radius_30s m-right20 m-bot20" v-show="item.list"
                                    v-for="(itm,idx) in item.list" :key="idx" @click="handleSpecs(index,itm.state,itm.specs_id)"
                                    :class="{'active': specs_ids[index] == itm.specs_id, 'color_cc': !itm.state}">{{ itm.title }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="d-flex j-sb a-center">
                        <view class="size28 color_33 bold m-top30 m-bot40">数量</view>
                        <view><u-number-box v-model="v_input" integer :max="stock" @overlimit="overlimit"></u-number-box></view>
                    </view>
                    <view v-if="specsFlag == 2" class="confirmBtn bgFF4B size30 white bold text-center" @click="handleSubmit">确定</view>
                    <view v-if="specsFlag == 1" class="row j-sb white">
                        <view class="btn flexac bgFFA size28" @click="clickBtn(3, true)">加入{{ cartName }}</view>
                        <view class="btn flexac bgFF4B size28" @click="clickBtn(1 ,true)">{{ pageData.goods_price_name ? pageData.goods_price_name : '立即购买' }}</view>
                    </view>
                </view>
            </u-popup>
            <!-- 运费说明 -->
            <u-popup :show="showFreDesc" closeable @close="showFreDesc = false">
                <view class="padding30" style="min-height: 300rpx;">
                    <view class="size32 color_22 bold m-bot30">运费说明</view>
                    <u-parse :content="freDesc" :domain="imgUrl" :scrollTable="true" :selectable="true" :useAnchor="true"></u-parse>
                </view>
            </u-popup>

            <showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
            <SharePoster v-if='showShareQr' :myid='goods_id' type='2' :pageType='"10&gid="+goods_id' @closePoster='showShareQr=false'></SharePoster>
            <showModeldetail v-if='showModal2' @cancelFunc='showModal2=false' :title='modalInfo.title' :msg='modalInfo.msg' :btn1='modalInfo.btn1' 
                :btn2='modalInfo.btn2' :btn1_url='modalInfo.btn1_url' :btn2_url='modalInfo.btn2_url' :jump='modalInfo.jump' type='99'></showModeldetail>

        </view>
        <!-- 首屏显示色块 -->
        <view class="bgf8" v-if="!pageData">
            <view style="height: 750rpx;"></view>
            <view class="padding20-40 bgwhite">
                <view class="bgf8 m-bot20 bor_radius_10" style="width: 140rpx; height: 60rpx;"></view>
                <view class="bgf8 bor_radius_10" style="height: 50rpx;"></view>
                <view class="bgf8 m-top20 bor_radius_10" style="height: 40rpx;"></view>
            </view>
            <view class="padding20" v-if="mode == 0">
                <view class="card padding20 bgwhite bor_radius_8">
                    <view class="bgf8 bor_radius_10" style="height: 32rpx;" v-for="item in 3" :key="item" :class="{'m-bot30': item < 2}"></view>
                </view>
            </view>
            <view class="package padding20" v-if="mode == 1">
                <view class="card padding20 bgwhite bor_radius_8">
                    <view class="item bgf8 bor_radius_10" v-for="item in 4" :key="item" :class="{'m-bot20': item < 3}"></view>
                </view>
            </view>
            <view class="bgwhite padding30-40" style="height: 400rpx">
                <view class="bgf8 bor_radius_10" style="width: 160rpx; height: 40rpx;"></view>
            </view>
            <view class="common_footer bgwhite p-top20 d-flex j-sb a-center" v-if="mode == 0">
                <view class="list d-flex j-sa a-center">
                    <view class="bgf8 bor_radius_10" style="width: 40rpx; height: 60rpx;" v-for="item in 3" :key="item"></view>
                </view>
                <view class="groupBtn bgf8 m-left20 m-right20 bor_radius_30" style="height: 70rpx;"></view>
            </view>
            <view class="order_footer bgwhite p-top20" v-if="mode == 1">
                <view class="row j-sb padding15-30">
                    <view class="bgf8 bor_radius_10" v-for="item in 2" :key="item" style="width: 160rpx; height: 40rpx;"></view>
                </view>
                <view class="row j-se padding15-30">
                    <view class="btn bgf8" v-for="item in 2" :key="item"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import SharePoster from "@/components/sharePoster.vue"
import Join from "@/components/Join.vue"
import catalogue from '@/components/answer/catalogue.vue'

import { mapState } from 'vuex'
export default {
    data(){
        return {
            staticUrl: this.staticUrl,
            baseUrl: this.baseUrl,
            imgUrl: this.imgUrl,
            menuButtonTop: getApp().globalData.menuButtonObject.top, // 胶囊按钮的top值
            goods_id: '',
            shop_id: uni.getStorageSync('shop_id'),
            mode: 0, // 默认电商、1是点餐
            tabList: [{name:'宝贝'}, {name:'评价'}, {name:'详情'}],
            currentTab: 0,
            pageData: '', // 详情
            swiperList: [],
            currentNum: 0,
            likeList: [],
            isFold: true,
            commentData: {},
            cartNum: 0,
            addr: '',
            freight: '',
            freDesc: '',
            showFreDesc: false,
            toTop: false,
            view1Top: 0,
            view2Top: 0,
            view3Top: 0,
            v_input: 1, // 计数器
            
            showPopup: false, 
            clickBtnType: 1, // 点击"立即购买"为1、"一键开团"为2、"加入购物车"为3
            specsList: [], // 规格列表
            specsCopy: '', // 原始数据字符串
            specsFlag: 1, // 点击"选择"显示规格弹框为1、点击底部为2
            specs_ids: [],
            currentSpecs: {},
            specs_title: '',
            stock: '', // 当前规格组合的库存或总库存

            fromShare: 0,
            showModal: false,
            showShareQr: false,
            showModal2: false,
            modalInfo: { title: '温馨提示', msg: '当前您的信息不完整', btn1: '稍后完善', btn2: '去完善',
                btn1_url: '', btn2_url: '', jump: '' },
            showed: false, // 避免首次加载页面执行"fade-out"动画
            scan: 0, // 是否来自扫码点餐
            tid: '' // 桌号id
        }
    },
    computed: {
        ...mapState(['nameDefinition','color','totalHeight','vid','startUp','cartName']),
        likeListCom(){
            return this.likeList.filter((item,index) => index < 4 || !this.isFold)
        },
        tabWidth(){
            return this.tabList.length == 4 ? '25%' : '33.33%'
        }
    },
    components: {
        SharePoster,
        Join,
		catalogue
    },
    onLoad(e){
        console.log('e', e)
        let that = this
        if(e.goodsid) that.goods_id = e.goodsid
        if(e.goods_id) that.goods_id = e.goods_id
        if(e.mode) that.mode = e.mode
        if(e.fromShare) that.fromShare = e.fromShare
        if(e.scan) that.scan = e.scan
        if(e.tid) that.tid = e.tid
        e.shop_id ? uni.setStorageSync('shop_id',e.shop_id) : uni.removeStorageSync('shop_id')
        if(e.share_v_id) uni.setStorageSync('share_v_id',e.share_v_id)
        that.getCart()
        that.getPageData()
        setTimeout(()=>{
            that.getViewTop('#evaluate').then(res=>{ that.view1Top = res })
            that.getViewTop('#details').then(res=>{ that.view2Top = res })
            that.getViewTop('#recommend').then(res=>{ that.view3Top = res })
        },1000)
    },
    onShow(){
        let that = this
        that.getOldAddress()
    },
    methods: {
        getPageData(){ // 页面初始化数据
            let that = this
            that.$http.post({
                url: '/singleSaleApi/singleDetails',
                data: {
                    goods_id: that.goods_id,
                    shop_id: that.shop_id
                }
            }).then(res=>{
                if(res.errcode != '100') return that.$Toast(res.msg)
                that.pageData = res.data
                that.stock = that.pageData.stock || '0'
                // 轮播图
                that.swiperList = that.pageData.goods_photo?.map(item=>({
                    url: item ? that.$imgUrls(item) : that.staticUrl + '/images/imageLoading.png',
                    type: 'image'
                }))
                if(that.pageData.goods_video){
                    that.swiperList.unshift({ url: that.pageData.goods_video, type: 'video' })
                }
                // 规格
                let {specsList, specsPrice} = that.pageData.getGoodsSpecs
                if(specsList && specsPrice){
                    that.specsList = specsList
                    that.specsCopy = JSON.stringify(that.specsList)
                    let first = specsPrice.find(item=>item.stock && item.stock != 0) // 接口返回的specs_ids默认从小到大排序
                    if(first){
                        specsList.forEach((item,index)=>{ // 强制按照规格类别排序且个数一致
                            let obj = item.list.find(itm=>first.specs_ids.includes(itm.specs_id))
                            that.specs_ids[index] = obj ? obj.specs_id : ''
                        })
                        that.stock = first.stock
                        that.currentSpecs = first
                    }
                }
                // 去参团-头像组
                if(that.pageData.groupData && that.pageData.goods_type == 2){
                    that.pageData.groupData.forEach(item=>{
                        item.groupUsers = item.groupUsers.map(itm=>({
                                v_headimg: that.$imgUrls(itm.v_headimg)
                            }))
                    })
                }
                that.getLikes()
                that.getComment()
            })
        },
        getLikes(){ // 推荐
            let that = this
            that.$http.post({
                url: '/singleSaleApi/guessLikeGoods',
                data: {
                    goods_id: that.goods_id,
                    shop_id: that.shop_id
                }
            }).then(res=>{
                if(res.data && res.data.length){
                    that.likeList = res.data
                    if(that.mode) return
                    that.tabList.push({ name: '推荐' })
                }
            })
        },
        getComment(){ // 评论
            let that = this
            that.$http.get({
                url: '/singleSaleApi/get_comment',
                data: {
                    goods_id: that.goods_id,
                    shop_id: that.shop_id,
                    page: 1,
                    pageNum: 6
                }
            }).then(res=>{
                if(res.errcode == 100){
                    that.commentData = res
                } 
            })
        },
        getCart(){ // 获取购物车数据
            let that = this
            that.$http.post({
                url: '/zzj_singleSaleApi/cartList',
                data: {
                    shop_id: that.shop_id
                }
            }).then(res=>{
                if(!res.data) return
                that.cartNum = res.cartNum
            })
        },
        getOldAddress(){
            let that = this
            that.$http.get({
                url: '/SRA_simMallApi/getOldAddress',
                data: {
                    type: 3
                }
            }).then(res=>{
                if(res.code == 100 && res.data && res.data.Aaddress){
                    that.addr = res.data.Aregion + res.data.Aaddress
                    that.getFreight()
                }
            })
        },
        getFreight(){
            let that = this
            that.$http.post({
                url: '/zzj_singleSaleApi/getGoodsFreight',
                data: {
                    goods_id: that.goods_id,
                    address: that.addr
                }
            }).then(res=>{
                if(res.code == 200 && res.data){
                    that.freight = res.data.title
                    that.freDesc = res.data.content
                }
            })
        },
        toCart(){
            let that = this
            if (!that.vid) return that.showModal = true
            if(that.mode == 0){
                that.$pop.toTab(7)
            } else {
                if(that.scan == 1) return that.toUrl('/otherPage/custom/placeOrder?tid='+ that.tid)
                that.$pop.toTab(4)
            }
        },
        previewImg(index){ // 预览图片
            let that = this
            if(that.swiperList[index].type != 'image') return
            let urls = []
            that.swiperList.forEach(item=>{
                if(item.type == 'image'){
                    urls.push(item.url)
                }
            })
            uni.previewImage({
                current: that.swiperList[index].url,
                urls,
                indicator: 'number'
            })
        },
        getViewTop(id){
            let that = this
            // 查询节点到顶部距离
            const query = uni.createSelectorQuery().in(this)
            const allTop = that.totalHeight + 44
            return new Promise(resolve=>{
                query.select(id).boundingClientRect(data=>{
                    console.log(id, data)
                    if(data){
                        resolve(data.top - allTop)
                    } else {
                        resolve(0)
                    }
                }).exec()
            })
        },
        parseDone(){
            let that = this
            that.getViewTop('#recommend').then(res=>{
                that.view3Top = res
            })
        },
        tabClick({index}){
            let that = this
            if(index == 0){ // 宝贝
                uni.pageScrollTo({ scrollTop: 0, duration: 100 }) // 将页面滚动到目标位置
            } else if(index == 1){ // 评价
                uni.pageScrollTo({ scrollTop: that.view1Top, duration: 100 })
            } else if(index == 2){ // 详情
                uni.pageScrollTo({ scrollTop: that.view2Top, duration: 100 })
            } else if(index == 3){ // 推荐
                uni.pageScrollTo({ scrollTop: that.view3Top, duration: 100 })
            }
        },
        handleCollect(){ // 收藏
            let that = this
            if (!that.vid) return that.showModal = true
            that.$http.post({
                url: '/singleSaleApi/goods_collect',
                data: {
                    goods_id: that.goods_id,
                    shop_id: that.shop_id
                }
            }).then(res=>{
                if(res.code != 200) return that.$Toast(res.msg)
                that.pageData.goods_collect = that.pageData.goods_collect ? 0 : 1
            })
        },
        handleShare(){ // 分享海报
            let that = this
            if (!that.vid) return that.showModal = true
            that.showShareQr = true
        },
        contact(){ // 客服
            let that = this
            if (!that.vid) return that.showModal = true
            if(that.startUp.service_state == 1){ // 客服系统
                uni.navigateTo({
                    url: "/userPage/message/consult?shop_id=" + that.pageData.store_id
                })
            } else{
                that.call()
            }
        },
        clickBtn(type, bool){
            let that = this
            that.specsFlag = bool ? 1 : 2
            if (!that.vid) return that.showModal = true
            that.judgeBuyPower(type)
        },
        judgeBuyPower(type){ // 判断有无购买权限
            let that = this
            that.$http.post({
                url: '/zzj_singleSaleApi/judgmentBuyPower',
                data: {
                    goods_id: that.goods_id,
                    shop_id: that.shop_id
                }
            }).then(res=>{
                if(res.code == 100){ // 通过验证
                    if(that.pageData.bind == 0) return that.showModal2 = true
                    if(that.pageData.show_time == 1 && that.pageData.goods_state == 2) return that.$Toast('活动未开始哦')
                    if(that.pageData.show_time == 1 && that.pageData.goods_state == 0) return that.$Toast('活动已结束哦')
                    that.clickBtnType = type
                    if(that.mode == 0 && that.specsFlag == 2){
                        that.showPopup = true
                    } else{
                        that.handleSubmit()
                    }
                }
                if(res.code == 'jumpRoute' || res.code == 'jumpUrl' && res.data != ''){
                    that.showModal2 = true
                    that.modalInfo = {...res, jump: res.code}
                }
            })
        },
        overlimit(type){
            let that = this
            if(type == 'plus'){
                that.$Toast('库存不足')
            }
        },
        handleSpecs(index,itmState,id){ // 类别索引,规格状态,规格id
            let that = this
            if(!itmState) return // 禁选
            if(that.specs_ids[index] == id) return // 已选

            let {specsPrice} = that.pageData.getGoodsSpecs
            that.specs_ids[index] = id // 非响应式
            let empty = that.specs_ids.filter(item=>!item)

            if(!empty.length){ // 已选完
                let up = that.specs_ids.slice().sort((a,b)=>a-b) // 创建副本再排序不影响原数组
                let current = specsPrice.find(item=>item.specs_ids == up.toString())
                console.log('已选完', current)
                if(current){
                    that.specs_ids = [...that.specs_ids] // 更新视图
                    that.stock = current.stock
                    that.currentSpecs = current
                    // 当前所选类别有无禁选规格，无则还原list
                    let result = that.specsList[index].list.find(item=>!item.state)
                    if(!result) that.specsList = JSON.parse(that.specsCopy)
                } else{ // 没找到为undefined
                    that.specs_ids = that.specs_ids.map(item=>item == id ? id : '') // 只保留当前所选规格，其余类别规格id清空
                    // that.specs_ids[index] = ''
                    // that.specsList[index].list.forEach(item=>{
                    //     item.state = item.specs_id == id ? false : true
                    // })
                }
            } else if(empty.length == 1){ // 仅剩一个类别未选，需判断该类别有无禁选规格
                that.specs_ids = [...that.specs_ids]
                // 未选类别索引
                let i = that.specs_ids.findIndex(item=>!item)
                that.specsList[i].list.forEach(item=>{
                    let arr = JSON.parse(JSON.stringify(that.specs_ids))
                    arr[i] = item.specs_id // 每一项规格组合
                    let result = specsPrice.find(itm=>itm.specs_ids == arr.sort((a,b)=>a-b).toString())
                    item.state = result ? true : false
                })
            } else {
                that.specs_ids = [...that.specs_ids]
            }
        },
        handleSubmit(){
            let that = this
            let params = `?goods_id=${that.goods_id}&goods_num=${that.v_input}`
            if(that.specsList.length){
                let empty = that.specs_ids.findIndex(item=>!item)
                if(empty == -1){ // 已选完
                    params = `${params}&specs_bind_id=${that.currentSpecs.id}&specs_bind_text=${that.currentSpecs.specs_title}`
                    that.specs_title = that.currentSpecs.specs_title
                } else{
                    return that.$Toast('请选择规格')
                }

            }
            if(that.v_input > that.stock) return that.$Toast('库存不足')

            if(that.clickBtnType == 1){ // 立即购买
                that.toUrl('/orderPage/order/createOrder' + params)
            } else if(that.clickBtnType == 2){ // 一键开团
                that.toUrl('/orderPage/order/createOrder' + params + '&open_group=1')
            } else if(that.clickBtnType == 3){ // 加入购物车
                that.$http.post({
                    url: '/zzj_singleSaleApi/joinCart',
                    data: {
                        num: that.v_input,
                        specs_bind_id: that.currentSpecs.id || '',
                        specs_bind_text: that.currentSpecs.specs_title || '',
                        goods_id: that.goods_id,
                        shop_id: that.shop_id,
                        tid: that.tid
                    }
                }).then(res=>{
                    if(res.errcode != 100) return that.$Toast(res.msg)
                    that.getCart()
                    that.showPopup = false
                    that.$Toast(`加入${that.cartName}成功`)
                    if(that.mode == 1) that.$back()
                })
            }
        }
    },
    onPageScroll(e){
        let that = this
        if(e.scrollTop > 100){
            that.toTop = true
            if(!that.showed) that.showed = true
        } else {
            that.toTop = false
        }
        if(e.scrollTop < that.view1Top){
            that.currentTab = 0
        }
        if(e.scrollTop >= that.view1Top){
            that.currentTab = 1
        }
        if(e.scrollTop >= that.view2Top){
            that.currentTab = 2
        }
        if(e.scrollTop >= that.view3Top && that.tabList.length > 3){
            that.currentTab = 3
        }
    },
    onShareAppMessage(){
        let that = this
        return {
            title: that.pageData.goods_name,
            desc: that.pageData.goods_info,
            path: `/pages/index/index?share_v_id=${that.vid}&pageType=10&gid=${that.goods_id}`,
            imageUrl: that.$imgUrls(that.pageData.goods_img)
        }
    }
}
</script>

<style lang="scss" scoped>
.detailPage {
    padding-bottom: calc(var(--page-bot) + constant(safe-area-inset-bottom));
    padding-bottom: calc(var(--page-bot) + env(safe-area-inset-bottom));
}
.fcBtn {
    position: fixed;
    left: 20rpx;
    z-index: 20;
    width: 160rpx;
    height: 64rpx;
    border-radius: 64rpx;
    border: 1rpx solid #dadbde;
}
.topNav {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    opacity: 0;
    pointer-events: none; // 是否正常点击
}
@keyframes fade-in {
    from{ opacity: 0 } to{ opacity: 1 }
}
@keyframes fade-out {
    from{ opacity: 1 } to{ opacity: 0 }
}
.showTopNav {
    animation: fade-in 1s forwards; // 保持最后一帧
    pointer-events: auto;
}
.hideTopNav {
    animation: fade-out 1s forwards;
    pointer-events: none;
}
.indicator-num {
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 200rpx;
    width: 100rpx;
}
.countDown {
    height: 100rpx; 
    background: linear-gradient(45deg, #FFDFC9, #FFF1E7, #FFB68E);
    .actName {
        width: 244rpx;
        height: 100%;
        background: linear-gradient(-45deg, #FF4E8C, #FF4B52, #FF9656);
        border-bottom-right-radius: 100rpx;
    }
    .stock { color: #FE3C5E; }
    .progress { width: 150rpx; }
}
.card {
    width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,.06);
}
.recommend {
    .item {
        width: 200rpx;
        height: 360rpx;
        margin-right: 35rpx;
        &:nth-child(3n){
            margin-right: 0;
        }
        .img {
            width: 200rpx;
            height: 200rpx;
        }
    }
}
.evaluate {
    .label {   
        line-height: 48rpx;   
        background: #FFECEC;
        border-radius: 24rpx;
        padding: 0 15rpx;
    }
    .cont {
        height: 220rpx;
        .item {
            width: 500rpx;
            height: 220rpx;
            border: 2rpx solid #EEEEEE;
            .img {
                width: 220rpx;
                height: 220rpx;
            }
        }
    }
}
.common_footer {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    z-index: 10;
    border-top: 1rpx solid #dddddd;
    .list {
        width: 300rpx;
    }
    .loneBtn {
        width: 410rpx;
        line-height: 72rpx;
        border-radius: 72rpx;
    }
    .groupBtn {
        width: 410rpx;
        .left {
            border-radius: 68rpx 0 0 68rpx;
        }
        .right {
            border-radius: 0 68rpx 68rpx 0;
        }
    }
}
.specsPop {
    .img {
        width: 168rpx;
        height: 168rpx;
    }
    .specsItm {
        background: #F4F4F4;
        border: 2rpx solid #F4F4F4;
        padding: 8rpx 40rpx;
        &.active {
            background: #fff0f0;
            border: 2rpx solid #ff4b4e;
            color: #ff4b4e;
        }
    }
    .confirmBtn {
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
        width: 100%;
        line-height: 80rpx;
        border-radius: 80rpx;
    }
    .btn {
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
        width: 48%;
        height: 72rpx;
        border-radius: 36rpx;
    }
}
// 点餐
.package {
    .item {
        width: 100%;
        height: 230rpx;     
        .img {
            width: 190rpx;
            height: 190rpx;
        }
    }
}
.order_footer {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    z-index: 10;
    border-top: 1rpx solid #dddddd;
    .btn {
        width: 300rpx;
        height: 72rpx;
        border-radius: 36rpx;
    }
}
.specsTag {
    min-width: 144rpx;
    line-height: 54rpx;
    padding: 0 10rpx;
    background: #F4F4F4;
    border: 2rpx solid #F4F4F4;
    &.active {
        background: #fff0f0;
        border: 2rpx solid #ff4b4e;
        color: #ff4b4e;
    }
}
</style>